<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition template="/templatePrincipal.xhtml" xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich">
    <ui:define name="conteudo" >
        <style  type="text/css">
            .odd-row {
                background-color: #ECF3FE;
            }
            .even-row {
                background-color: #FCFFFE;
            }
            .active-row {
                background-color: #FFECDA;
            }
        </style>
        <rich:spacer height="20"/>
        <center>
            <rich:messages layout="table"
                           errorClass="errorClass"
                           infoClass="infoClass"
                           warnClass="warnClass"
                           styleClass="painelMensagem"
                           ajaxRendered="true"/>
        </center>
        <rich:spacer height="10"/>
        <a4j:form ajaxSubmit="true">
            <center>
                <rich:dataTable id="dtRanking"
                                value="#{apostaAction.listaApostas}" var="_aposta"
                                reRender="ds"
                                cellpadding="0" cellspacing="0"
                                captionClass="bold"
                                columnClasses="colunaCentralizada,colunaCentralizada,colunaCentralizada,colunaCentralizada"
                                columnsWidth="250,50, 50,50">
                    <f:facet name="header">
                        Detalhes da pontuacao do usuario #{identity.username}
                    </f:facet>
                    <rich:column>
                        <f:facet name="header">
                            Jogo
                        </f:facet>
                        <h:outputText value="#{_aposta.fkJogo.dataJogo}">
                            <f:convertDateTime pattern="dd/MM/yyyy" />
                        </h:outputText> - #{_aposta.fkJogo.time1.nome} X #{_aposta.fkJogo.time2.nome}
                    </rich:column>

                    <rich:column>
                        <f:facet name="header">
                            Aposta
                        </f:facet>
                        #{_aposta.getGolsTime1()} x #{_aposta.getGolsTime2()}
                    </rich:column>

                    <rich:column>
                        <f:facet name="header">
                            Resultado
                        </f:facet>
                        #{_aposta.fkJogo.golsTime1} x #{_aposta.fkJogo.golsTime2}
                    </rich:column>

                    <rich:column sortBy=" #{_aposta.pontos}">
                        <f:facet name="header">
                            Pontos
                            <span class="field-info"> (clique para ordenar)</span>
                        </f:facet>
                        #{_aposta.pontos==null?0:_aposta.pontos}
                    </rich:column>
                    <f:facet name="footer">
                        <rich:datascroller id="ds">
                        </rich:datascroller>
                    </f:facet>
                </rich:dataTable>
            </center>
            <br></br>
            <rich:jQuery selector="#dtRanking tr:odd" query="addClass('odd-row')" />
            <rich:jQuery selector="#dtRanking tr:even" query="addClass('even-row')" />
            <rich:jQuery selector="#dtRanking tr"
                         query="mouseover(function(){jQuery(this).addClass('active-row')})"/>
            <rich:jQuery selector="#dtRanking tr"
                         query="mouseout(function(){jQuery(this).removeClass('active-row')})"/>
        </a4j:form>
    </ui:define>
</ui:composition>
